<template>
    <div>
      <ul >
            <li v-for=" (item ,index) in  content" :key="index"><p>{{item.title}}</p></li>   
        </ul>
        <router-link  to="/youxi/tuiguanA">英雄联盟</router-link>

        <router-link  to="/youxi/tuiguanB">战地5</router-link>

        <transition name="list" mode="out-in">
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </transition>
    </div>
</template>

<script>
    export default {
             data(){
            return {
                content:[]
            }
        }
        ,
        created() {
            this.$axios.get("http://127.0.0.1:3200/API/getGame").then( (db)=>{
                this.content=db.data
      
            })

        },
        methods: {
          loadArticle(){
            console.log("查询信息");
          }
        },
        
        // 内部权限
        // beforeRouteEnter(to, from, next) {
        //         console.log('组件beforeRouteEnter')
        //         next();
        // },
        // beforeRouteUpdate(to, from, next) {
        //     // /user/1  => /user/2 
        //     // 可以访问组件实例 `this`
        //     console.log('组件beforeRouteUpdate')
        //     this.loadArticle();
        //     next();
        // },
        // beforeRouteLeave(to, from, next) {
        //     // 导航离开该组件的对应路由时调用
        //     // 可以访问组件实例 `this`
        //     console.log('组件beforeRouteLeave')
        //     // 询问要是否离开当前页面
        //     if(confirm('你还有数据未保存，确定要离开吗？')){
        //         next()
        //     }else{
        //         // 继续在当前页面
        //         // return false;
        //         next(false); // 中止路由跳转
        //         NProgress.done()
        //     }
           
        // }
    }
</script>

<style lang="scss" scoped>

</style>